<template>
  <div class="oil_card">
    <header>
       <p @click='home'><img src="../assets/img/left@2x.png"></p>
       <p>加油卡</p>
       <p></p>
    </header>
    <div class="oil_card_wrap">
        <div class="banner">
          <img src="../assets/img/banner_2x@2x.png" />
        </div>
        <section>
          <router-link to = 'open_card' class="account_card">开通加油卡</router-link>
          <router-link to = 'recharge_card'  class="recharge_card">加油卡充值</router-link>
          <router-link to = 'apply_paper'  class="apply_invoice">申请发票</router-link>
        </section>
        <footer>
          <router-link to = 'checkouter' class="checkouter">
            <p><img src="../assets/img/cx_tb@2x.png"></p>
            <p>查询</p>
          </router-link>
          <router-link to = '' class="oil_station">
            <p><img src="../assets/img/jy_tb@2x.png" ></p>
            <p>加油站</p>
          </router-link>
        </footer>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'oil_card',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  },
  methods:{
    home:function(){
        this.$router.go(-1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.oil_card {
  height: 100%;
  background: #f7f7f7;
  header {
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(30,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        .font(30,#fff);
      }
    }
  .oil_card_wrap {
    .banner {

      font-size: 0;
      img {
        .padding-bottom(18);
        width: 100%;
      }
    }
    section {
      width: 94%;
      margin: auto;
     a {
      display: block;
      .margin-top(30);
      .line-height(82);
      .font-size(34);
      text-align: center;
      .border(1,solid,#2bb663);
      color: #2bb663;
      .border-radius(8);
     }
     .account_card {
      background: #2bb663;
      color: #fff;
     }
    }
    footer {
      display: flex;
      justify-content: space-around;
      .padding-top(88);
      .checkouter {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
        width: 30%;
        .padding-bottom(42);
        img {
          .margin-top(42);
          .margin-bottom(24);
          .px2rem(height,76);
          .px2rem(width,76);
        }
      }
      .oil_station {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
         width: 30%;
        .padding-bottom(42);
        p {
          
        }
        img {
          .margin-top(42);
          .margin-bottom(24);
          .px2rem(height,78);
          .px2rem(width,74);
        }
      }
    }
  }
}


</style>

